<!-- ProductList.vue -->
<template>
  <div class="product-grid">
    <ProductCard 
      v-for="product in filteredProducts" 
      :key="product.id"
      :product="product"
      @click="handleProductClick"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import ProductCard from './ProductCard.vue';

const props = defineProps({
  products: Array,
  searchKeyword: String
});

// 计算属性实现数据过滤
const filteredProducts = computed(() => {
  return props.products.filter(p => 
    p.name.toLowerCase().includes(props.searchKeyword.toLowerCase())
  );
});

const handleProductClick = (productId) => {
  router.push(`/product/${productId}`);
};
</script>